<template>
  <div style="width:100%;height:100%;background:none">
    <div class="title">工资支付</div>
    <div class="contentTitle">
      工资发放总额
      <span
        style="font-size:3rem;color:#5CFFFF;margin-left:2rem;font-family: 'Agency-FB';font-weight: bold;"
      >{{tenThousand(wageTotal)}}</span>
      <span style="font-size:1.6rem;color:#5CFFFF;font-family: 'Agency-FB';font-weight: bold;">万元</span>
    </div>

    <div style="height:60%;width:100%;margin:0 auto">
      <ul>
        <li
          v-for="(item,index) in wagePayData"
          :key="index"
          style="margin-bottom:0.8rem;color:#fff;"
        >
          <div class="flexStart">
            <div style="width:25%;text-align:right;font-size:1.4rem">{{item.name}}</div>
            <div class="barDiv">
              <div class="barDiv-active" :style="'width:'+(item.num/max)*100+'%'"></div>
            </div>
            <div style="color:#fff; width:20%; margin-left:2rem">{{tenThousand(item.num)}}</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      wagePayData: [],
      wageTotal: '',
      max: 0
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  mounted() {
    // this.getPageWage()
    let resData = this.$store.state.dataCenterHome.homePageWageVO
    if (resData != null) {
      this.wageTotal = resData.wageTotal

      this.max = 0
      for (var key in resData.orgWageMap) {
        let obj = { name: '', num: '' }
        obj.name = key
        obj.num = resData.orgWageMap[key]
        if (obj.num > this.max) {
          this.max = obj.num
        }
        this.wagePayData.push(obj)
      }
      if (this.max==0) {
        this.max=1
      }
      for (var i = 0; i <  this.wagePayData.length - 1; i++) {
        //决定每一轮比较多少次
        for (var j = 0; j <  this.wagePayData.length - i - 1; j++) {
          if (this.wagePayData[j].num < this.wagePayData[j + 1].num ) {
            var tmp = this.wagePayData[j].num 
            var tmpName= this.wagePayData[j].name
            this.wagePayData[j].num  = this.wagePayData[j + 1].num 
            this.wagePayData[j].name  = this.wagePayData[j + 1].name 
            this.wagePayData[j + 1].num  = tmp
            this.wagePayData[j + 1].name  = tmpName
          }
        }
      }
    }
  },
  methods: {
    //转换为万元
    tenThousand(val) {
      if (val == null) {
        return 0
      } else {
        return (val / 10000).toFixed(2)
      }
    }
  }
}
</script>

<style scoped>
.title {
  font-size: 1.6rem;
  color: #fff;
  margin-bottom: 0.5%;
}
.contentTitle {
  font-size: 1.4rem;
  color: #fff;
  margin: 0 auto;
  width: 80%;
  text-align: center;
  margin-bottom: 2%;
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}
li {
  cursor: pointer;
}
ul {
  overflow: auto;
  height: 100%;
  width: 100%;
}
ul::-webkit-scrollbar {
  display: none;
}

.barDiv {
  width: 55%;
  height: 1.5rem;

  margin-left: 1rem;
}
.barDiv-active {
  background: linear-gradient(90deg, #26dad5 0%, #1aa09c 100%);

  height: 1.5rem;
}
.flexStart {
  align-items: center;
}
</style>